﻿<style>
    /* 穿梭框组件 */
    li {
        list-style: none;
    }

    .transfer {
        width: 100% !important;
        box-sizing: border-box;
        margin: 10px;
    }

        .transfer .transfer-box {
            position: relative;
            border-width: 1px;
            width: 200px;
            height: 360px;
            border-radius: 2px;
            background-color: #fff;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
        }

        .transfer .transfer-active {
            margin: 0 5px;
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
        }

    .transfer-active .btn {
        display: block;
        margin: 0;
        padding: 0 15px;
        border-color: #e6e6e6;
        color: #C9C9C9;
    }

    .transfer .transfer-active .btn:first-child {
        margin-bottom: 15px;
    }

    .transfer .transfer-data {
        padding: 5px 0;
        overflow: auto;
    }

        .transfer .transfer-data li {
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
        }

            .transfer .transfer-data li span {
                padding-left: 0;
                padding-right: 15px;
                line-height: 18px;
                background: 0 0;
                color: #666;
            }

    .transfer .transfer-header {
        height: 38px;
        line-height: 38px;
        border-bottom-width: 1px;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
    }

    .transfer .transfer-box .transfer-header .checkbox-inline {
        padding-left: 28px;
        line-height: 23px;
    }

    .transfer .unselect {
        height: auto !important;
        line-height: normal !important;
        padding-left: 28px;
        padding-right: 0;
    }
</style>
<div class="transfer">
    <div class="transfer-box" data-index="0" style="width: 200px; height: 360px;">
        <div class="transfer-header">
            <label class="checkbox-inline">
                <input type="checkbox" class="checkbox-all"> 系统角色
            </label>
        </div>
        <div class="select-content">
            <ul class="transfer-data unselect-ul" style="height: 320px;">
                @foreach (var item in Model)
                {
                    <li>
                        <input type="checkbox" class="checkboxs" title="@item.Name" value="@item.ID" />
                        <span>@item.Name</span>
                    </li>
                }
            </ul>
        </div>
       
    </div>
    <div class="transfer-active">
        <button type="button" id="btn_right" name="btn_right" class="transfer-btn btn right" data-index="0">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
        <button type="button" id="btn_left" name="btn_left" class="transfer-btn btn left" data-index="1">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </button>
    </div>
    <div class="transfer-box" data-index="1" style="width: 200px; height: 360px;">
        <div class="transfer-header">
            <label class="checkbox-inline">
                <input type="checkbox"> 已分配角色
            </label>
        </div>
        <div class="select-content">
            <ul class="transfer-data selected-ul" style="height: 320px;">
            </ul>
        </div>
        </div>
    </div>

<script>
    $(function () {
        //全选函数
        $('.checkbox-all').click(function () {
            if ($(this).prop('checked')) {
                $(this).parent().next().find('.checkboxs').prop('checked', true);
            } else {
                $(this).parent().next().find('.checkboxs').prop('checked', false);
            }
            btn_status();
        })
        //单个checkbox与全选的关系函数
        $('.select-content').on('click', '.checkboxs', function (e) {
            var checkedAll = $(this).parents('.select-content').prev().find('.checkbox-all');
            var checkboxs = $(this).prop('checked');
            if (!checkboxs && checkedAll.prop('checked')) {
                checkedAll.prop('checked', false);
            } else if (checkboxs && !checkedAll.prop('checked')) {
                var lis = $(this).parents('ul').children();
                for (var i = 0; i < lis.length; i++) {
                    if ($(lis[i]).find('.checkboxs').prop('checked')) {
                        if (i == lis.length - 1) {
                            checkedAll.prop('checked', true)
                        }
                    } else {
                        break;
                    }
                }
            }
            stopFunc(e);
        });
        $('.select-content').on('click', 'li', function () {
            $(this).children('.checkboxs').click();
            btn_status();
        })

        //左右移按钮点击事件
        $('.transfer-btn').click(function () {
            var checkboxs, origin, target, num = 0;
            if ($(this).hasClass('right')) {
                origin = $('.unselect-ul');
                target = $('.selected-ul');
            } else {
                origin = $('.selected-ul');
                target = $('.unselect-ul');
            }
            checkboxs = origin.find('.checkboxs');
            for (var i = 0; i < checkboxs.length; i++) {
                if ($(checkboxs[i]).prop('checked')) {
                    var that = $(checkboxs[i]).parent().clone();
                    that.children('input').prop('checked', false);
                    target.append(that);
                    $(checkboxs[i]).parent().remove();
                } else {
                    num++;
                }
            }
            if (checkboxs.length == num) {
                alert('未选中任何一项');
            } else {
                origin.parent().prev().find('.checkbox-all').prop('checked', false);
            }
            btn_status();
            getroles();
        })

    });
    // 动态判断改变btn状态
    function btn_status() {
        var left_ul = document.getElementsByClassName('unselect-ul')
        var right_ul = document.getElementsByClassName('selected-ul')
        var left_ul_li = left_ul[0].children
        var right_ul_li = right_ul[0].children
        var left_btn = false
        var right_btn = false
        for (var i = 0; i < left_ul_li.length; i++) {
            if (left_ul_li[i].firstElementChild.checked == true) {
                left_btn = true
            }
        }
        for (var i = 0; i < right_ul_li.length; i++) {
            if (right_ul_li[i].firstElementChild.checked == true) {
                right_btn = true
            }
        }
        if (left_btn) {
            $("#btn_right").addClass("btn-primary");
        } else {
            $("#btn_right").removeClass("btn-primary");
        }
        if (right_btn) {
            $("#btn_left").addClass("btn-primary");
        } else {
            $("#btn_left").removeClass("btn-primary");
        }

    }

    function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }
    //获取选中的值
    function getroles() {
        var transfer_data = [];
        var target = $('.selected-ul');
        checkboxs = target.find('.checkboxs');
        for (var i = 0; i < checkboxs.length; i++) {
            var that = $(checkboxs[i]).parent().clone();
            var vl = that.children('input').val();
            transfer_data.push(vl);
        }
        console.log("transfer:"+transfer_data);
        return transfer_data;
    }
</script>
